Dark Mode

hr.icon

iOS 13.0以降では、「ダークモード」と呼ばれる、システム全体が暗い外観を採用することを選択できます。

ダークモードでは、すべての画面、ビュー、メニュー、コントロールに暗めのカラーパレットが使用され、暗めの背景の中で前景のコンテンツが目立つように、より鮮やかな色が使われます。

ダークモードは、すべてのアクセシビリティ機能をサポートしています。

https://gyazo.com/1464bb8f48db1546abc1d17349d4bb05

https://gyazo.com/02a7aa7cab8ccc132fb5e9ae7a7ed9db

「設定」では、デフォルトのインターフェーススタイルとしてダークモードを選択したり、外観モード間の自動変更をスケジュールすることができます。

このような選択はシステム全体で行われるため、一般的に、すべてのアプリケーションが自分の好みを尊重することが期待されます。

ユーザーが「設定」で選択した外観モードに対応する。

アプリ固有の外観モードオプションを提供すると、ユーザーは複数の設定を調整しなければならないため、手間がかかります。

さらには、システム全体のアピアランス選択に対応していないため、アプリが壊れていると思われてしまうかもしれません。

明るい外観と暗い外観の両方でデザインをテストしてください。

両方の外観でインターフェイスがどのように見えるかを確認し、それぞれに対応するように必要に応じてデザインを調整します。

一方の外観ではうまくいくデザインでも、もう一方の外観ではうまくいかない場合があります。

ダークモードでは、コントラストと透明度のアクセシビリティ設定を調整して、コンテンツが快適に読めるようにします。

ダークモードでは、「コントラストを上げる」と「透明度を下げる」を別々に、または同時にオンにして、コンテンツをテストする必要があります。

暗い背景の上に暗い色のテキストを置くと、読みにくくなる場所があるかもしれません。

また、ダークモードで「コントラストを上げる」をオンにすると、暗いテキストと暗い背景の間の視覚的なコントラストが低下することがあります。

視力の強い人はコントラストの低いテキストを読むことができるかもしれませんが、視覚障害のある人にとってはそのようなテキストは読みづらくなる可能性があります。

Dark Mode Colors

ダークモードのカラーパレットには、暗い色の背景色と明るい色の前景色が含まれています。

これらの色は、モード間やアプリケーション間で一貫した雰囲気を維持しながら、コントラストを確保するために慎重に選択されています。

ダークモードでは、ベースカラーとエレベーテッドカラーと呼ばれる2種類の背景色を使用して、暗い色のインターフェースを重ねたときの奥行き感を高めています。

ベースカラーは暗い色で、背景のインターフェースが後退しているように見え、エレベーテッドカラーは明るい色で、前景のインターフェースが前進しているように見えます。

システムの背景色を優先します。

ダークモードはダイナミックで、ポップオーバーやモーダルシートなどのインターフェースが前面に出てくると、背景色がベースカラーからエレベーテッドカラーに自動的に変わります。

また、マルチタスク環境ではアプリ間の、マルチウィンドウ環境ではウィンドウ間の視覚的な分離のために、システムは昇順の背景色を使用します。

カスタムの背景色を使用すると、システムが提供するこれらの視覚的な区別を人々が認識しにくくなります。

現在の外観に適応するダイナミックカラーを使用する。

カスタムカラーが必要な場合は、アプリのアセットカタログにカラーセットアセットを追加し、カラーのライトバリエーションとダークバリエーションを指定することで、現在のアピアランスモードに適応できるようになります。

ハードコードされた色の値や、適応できない色の使用は避けてください。

https://gyazo.com/a848dcbbe6373c6d4100bb68fd1ab2f1

https://gyazo.com/0b28e73abc2e02c30fcd5a01adfbf6f8

https://gyazo.com/2e4bdacf7fad8d7cb65e559426a28412

すべてのアピアランスで十分なカラーコントラストを確保します。

システムで定義された色を使用すると、前景と背景のコンテンツ間のコントラスト比が適切になります。

カスタムカラーを使用する場合は、特に小さいテキストの場合、7:1のコントラスト比を目指してください。

白い背景の色を和らげる。

ダークモードでコンテンツに白い背景を使用しなければならない場合は、周囲の暗いコンテンツに対して背景が光らないように、少し暗めの白を選びます。

Image, Icon, and Symbol Color

本システムでは、ダークモードで自動的に美しく表示されるSFシンボルと、明暗両方の表示に最適化されたフルカラー画像を使用しています。

可能な限り、SF シンボルを使用してください。

シンボルは、ダイナミックカラーを使って色合いを変えたり、鮮やかさを加えたりすると、どちらの表示モードでも美しく見えます。

必要に応じて、個々のグリフを明暗の外観に合わせてデザインします。

ライトモードで中空のアウトラインを使用しているグリフは、ダークモードではソリッドな塗りつぶした形状にした方が見栄えがよい場合があります。

フルカラーの画像やアイコンが美しく見えるようにする。

ライトモードとダークモードの両方で見栄えがする場合は、同じアセットを使用してください。

一方のモードでしか見栄えがしない場合は、アセットを変更するか、ライトモードとダークモードのアセットを別々に作成します。

アセットカタログを使用して、アセットを1つの名前の付いた画像にまとめる。

Materials

鮮やかな色は、暗い色の背景でテキストのコントラストを保つのに役立ちます。

ラベルには、システムで提供されているラベルカラーを使用してください。

一次、二次、三次、四次のラベルカラーは、見た目の明暗に自動的に対応します。

システムビューを使ってテキストフィールドやテキストビューを描画する。

システムビューとコントロールを使用すると、アプリのテキストがどのような背景でも美しく表示され、鮮やかさの有無に応じて自動的に調整されます。

可能な場合は、自分でテキストを描くのではなく、システムが提供するビューを使用してテキストを表示します。